<!DOCTYPE html>  
<html>  
<head>  
    <title>EaselJS demo: localToLocal</title>  
    <style type="text/css">  
    body {  
    margin: 0;  
    padding: 7px;  
    background-color: rgba(255,255,255,0);  
    }  
  
    canvas {  
        border: solid 1px rgba(0,0,0,0.05);  
    }  
    </style>  
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>  
    <script>  
        var stage, arm;  
        function init() {  
            stage = new createjs.Stage("demoCanvas");  
              
            target = stage.addChild(new createjs.Shape());  
            target.graphics.beginFill("red").drawCircle(0,0,45)  
                .beginFill("white").drawCircle(0,0,30)  
                .beginFill("red").drawCircle(0,0,15);  
            target.x = 100;  
            target.y = 180;  
              
            arm = stage.addChild(new createjs.Shape());  
            arm.graphics  
                .beginFill("black").drawRect(-2,-2,100,4)  
                .beginFill("blue").drawCircle(100,0,30);  
            arm.x = 180;  
            arm.y = 100;  
              
            createjs.Ticker.on("tick", tick);  
        }  
          
        function tick(event) {  
            arm.rotation += 10;  
            target.alpha = 0.2;  
            var pt = arm.localToLocal(100, 0, target); // 传递的是红色小球圆心位置  
            if (target.hitTest(pt.x, pt.y)) { target.alpha = 1; }  
              
            stage.update(event);  
        }  
    </script>  
</head>  
<body onload="init();">  
    <canvas id="demoCanvas" width="1280" height="720">  
        alternate content  
    </canvas>  
</body>  
</html>  